<template>
    <div class="content">
        <div class="top-content">
            <div class="box">
                <div class="left-box">
                    <div class="item" v-for="(item, index) in routerJson" :key="index" @click="gotoweb(item.path)">
                        {{ item.title }}
                    </div>
                </div>
                <div class="top-content-right">
                    <div class="tel-box">
                        咨询热线：{{ webMessage.tel1 }} {{ webMessage.tel2 }}
                    </div>
                </div>
            </div>
        </div>
        <div class="top-list">
            <div class="box">
                <div class="img">
                    <img src="@/assets/ui/ui-logo.png" alt="" srcset="">
                </div>
                <div class="list-box">
                    <div class="item" @click="gotoweb('/')">网站首页</div>
                    <div class="item" v-for="(item, index) in topList" :key="index" @click="gotoChanpin(item.record_id
)"> 
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script setup>
import router from '@/router/index.js'
import { getTopList, getWebXinxi } from '@/api/viewapi.js'
import { ref, reactive, onMounted } from 'vue'


const webMessage = ref({})

const topList = ref([])


const routerJson = [
    {
        title: '网站首页',
        path: '/'
    }, {
        title: '关于我们',
        path: '/about'
    }, {
        title: '新闻中心',
        path: '/news'
    }, {
        title: '联系我们',
        path: '/telme'
    }
]

const gotoweb = (path) => {
    router.push(path)
}

const getWebMessage = () => {
    getWebXinxi().then((res) => {
        webMessage.value = res.data.data
        console.log(res);
    })
}

const _getTopList = () => {
    getTopList().then((res) => {
        topList.value = res.data.toplist_ids
        console.log(res);
    })
}

// 跳转商品列表 
const gotoChanpin = (id) => {
    router.push({path:'/chanpinlist',query:{id:id}})
}



onMounted(() => {
    getWebMessage()
    _getTopList()
})
</script>

<style scoped lang="scss">
.content {
    .top-content {
        background-color: #00a0e9;
        border-bottom: 1px solid rgb(98, 179, 255);

        .box {
            margin: 0 auto;
            max-width: 1400px;
            padding: 10px 40px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: white;


            .left-box {
                display: flex;

                .item {

                    cursor: pointer;
                    margin-right: 40px;
                }
            }

            .top-content-right {
                .tel-box {}
            }
        }
    }

    .top-list {
        padding-top: 20px;
        padding-bottom: 20px;

        background-color: #7272720a;

        .box {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .img {
                margin-top: 14px;
                width: 140px;
                img {
                    width: 140px;
                }
            }

            .list-box {
                display: flex;
                font-size: 16px;

                .item {
                    line-height: 80px;
                    padding: 0 10px;
                    cursor: pointer;
                    transition: transform 0.3s ease, background-color 0.3s ease;
                    border-radius: 4px;
                    margin-left: 10px;
                }
                .item:hover {
                    background-color: #00a0e9;
                    color: white;
                }

            }
        }
    }
}


</style>
